<template>
    <div class="shop-footer">

        <div class="shop-star vux-1px-r"  @click="gofavorate" :class="{'active':favstatus.product}">
            <x-icon v-if="favstatus.product" class="fillIcon" type="ios-star" size="20"></x-icon>
            <x-icon v-if="!favstatus.product" class="iconOut" type="ios-star-outline" size="20"></x-icon>
            <div>{{favstatus.message}}</div>
        </div>
        <div class="shop-card vux-1px-r" @click="gocar()" :class="{'active':idx>0}">
            <i class="fa fa-shopping-cart" :class="{'active':idx>0}"></i>
            <div>购物车</div>
        </div>
        <div class="shop-chat" @click="gochat()" >
            <i class="fa fa-commenting-o"></i>
            <div>客服</div>
        </div>
        <div class="add" @click="addCar">加入购物车</div>
        <div class="buy" @click="goBuy">立即购买</div>
    </div>
</template>
<script>
import axios from '@/api/request'
export default {
    name: "shop-footer",
    props: {
      shopId: {
        type:String,
        default:'',
      },
    },
    data () {
        return {
          idx:0,
          favstatus:{},
        }
    },
    mounted(){
        this.getfav()
    },
    // watch:{
    //   shopId:function(){
    //       this.getfav()
    //   }
    // },
    methods:{
        addCar(){
          this.$emit('goCar','1');
        },
        goBuy(){
           this.$emit('goBuy','2');
        },
        gocar(){
            var self=this
            self.idx++
            self.$router.push({ path:'/cart', query: {userId: self.$route.query.userId}})
        },
        gochat(){   //客服聊天
            // this.IMlogin()
            var self=this
            self.$router.push({path:'/chat',query:{goodsId: self.$route.query.goodsId,fromGoods: true}})
        },
        getfav(){   ///device/collection/difference
          var data={
              userId:this.$route.query.userId,
              proxyId:this.$route.query.goodsId,
          }
           console.log(data)
          axios('/device/collection/difference','post',data).then(res=>{
              console.log(res)
                this.favstatus=res.data.data
                
              if(res.data.code==1000){
                
                  this.favstatus.product=='0'?this.favstatus.message="收藏":this.favstatus.message="已收藏"
                }else{
                    this.favstatus.message="收藏"
                }
             })
        },
        gofavorate(){
           var data = {
                dis : this.favstatus.product, // 0: 收藏 1: 取消收藏
                userId :this.$route.query.userId,
                type : 2, // : 收藏一手商品
                proxyId :this.$route.query.goodsId// shopId
             }
             console.log(data)
          axios('/device/collection/inIf','post',data).then(res=>{
              console.log(res)
                    if(res.data.code==1000){
                        if(this.favstatus.product==1){
                           this.favstatus.product=0
                           this.favstatus.message="收藏"
                        }else{
                            this.favstatus.product=1
                           this.favstatus.message="已收藏"
                        }
                    }
             })
        },
    }
}
</script>
<style lang="less" scoped>
    .shop-footer {
        background-color: #fff;
        height: 96/75rem;
        box-shadow: 0px 5px 5px 5px #1d1a1a;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 9;
        width: 100%;
        .active{
            color: #ff4444;
        }
        i {font-size: 160%;}
        .shop-star {
            font-size: 26/75rem;
            width: 112/75rem;
            text-align: center;
            .active{
                i{
                  color: #ff4444;
                }
            }
            .fillIcon{
                //display: block;
                fill: #ff4444;
                //color: #ff4444;
            }
        }
        .shop-card {
            font-size: 26/75rem;
            width: 128/75rem;
            text-align: center;
        }
        .shop-chat{
            font-size: 26/75rem;
            width: 128/75rem;
            text-align: center;
        }
        .add {
            height: 100%;
            //width: 254/75rem;
            flex: 1;
            background-color: #F5F5F5;
            color: #444;
            line-height: 96/75rem;
            text-align: center;
        }
        .buy {
            height: 100%; 
            flex: 1;
            line-height: 96/75rem;;
            background-color: #FED853;
            color: #444;
            text-align: center;
        }
    }
</style>

